<%--@elvariable id="webRoot" type="com.doupi.partner.op.interceptor.OpFilter"--%>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="common/tags.jsp" %>

<!doctype html>
<html class="no-js">
<title>逗皮营销公众平台</title>
<head>
    <%@ include file="common/assets.jsp" %>
</head>
<body>
<%@ include file="common/header.jsp" %>

<div class="am-cf admin-main">
    <!-- sidebar start -->
    <%@ include file="common/menu.jsp" %>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content">

        <div class="am-g" style="margin-top: 20px;">

            <util:wholePermission name="index:data:1">
                <%--粉丝数据--%>
                <div class="am-u-sm-12" id="userList">
                </div>
            </util:wholePermission>

            <util:wholePermission name="index:data:2">
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf">
                        <h4 class="am-text-primary am-text-lg">实时数据汇总</h4>
                    </div>
                </div>
                <div class="am-g">
                    <div class="am-u-sm-12" id="topStatistics">
                    </div>
                </div>
            </util:wholePermission>


            <util:wholePermission name="index:data:3">
                <%--实时小时数据--%>
                <div class="am-g">
                    <div class="am-u-sm-12">
                        <div id="accumulateStatisticsGroupByHour" style="width: 100%; height: 450px;"></div>
                    </div>
                </div>
            </util:wholePermission>

            <util:logicPermissionTag name="index:data:4-1 or index:data:4-2">
                <%--历史曲线--%>
                <div class="am-g">
                    <div class="am-u-md-4 am-u-md-push-8">
                        <div class="am-form-group">
                            <util:wholePermission name="index:data:4-1">
                                <label class="am-radio-inline">
                                    <input type="radio" value="1" name="historyStatisticsGroupByHourOrDateType"
                                           data-am-ucheck checked
                                           onclick="historyStatisticsGroupByHourOrDateChangeType(1)">
                                    天
                                </label>
                            </util:wholePermission>

                            <util:wholePermission name="index:data:4-2">
                                <label class="am-radio-inline">
                                    <input type="radio" value="2" name="historyStatisticsGroupByHourOrDateType"
                                           data-am-ucheck onClick="historyStatisticsGroupByHourOrDateChangeType(2)">
                                    小时
                                </label>
                            </util:wholePermission>
                            <select data-am-selected="{ btnSize: 'sm', btnStyle: 'secondary'}"
                                    id="historyStatisticsGroupByHourOrDateSelect"
                                    onchange="historyStatisticsGroupByHourOrDate();">
                                <util:wholePermission name="index:data:4-2">
                                    <option value="0" disabled="disabled"
                                            data-end-day="0">今天
                                    </option>
                                    <option value="1" disabled="disabled"
                                            data-end-day="1">昨天
                                    </option>
                                </util:wholePermission>
                                <option value="7" data-end-day="1">七天（不包含今天）</option>
                                <option value="30" data-end-day="1">一个月（不包含今天）</option>
                                <option value="90" data-end-day="1">季度（包含今天）</option>
                                <option value="180" data-end-day="1">半年（包含今天）</option>
                                <option value="365" data-end-day="1">一年（包含今天）</option>
                            </select>
                        </div>
                    </div>
                    <div class="am-u-sm-12">
                        <div id="historyStatisticsGroupByHourOrDate" style="width: 100%; height: 500px;"></div>
                    </div>
                </div>
            </util:logicPermissionTag>

            <util:wholePermission name="index:data:5">
                <%--排名--%>
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf">
                        <h4 class="am-text-primary am-text-lg">昨日收益排行</h4>
                    </div>
                </div>
                <div class="am-g">
                    <div class="am-u-sm-12">
                        <table width="100%"
                               class="am-table am-table-striped am-table-bordered am-table-compact am-text-nowrap">
                            <thead>
                            <tr>
                                <th>手机号</th>
                                <th>昨日总收益</th>
                                <th>排名</th>
                            </tr>
                            </thead>
                            <tbody id="yesterdayProfitRank">
                            </tbody>
                        </table>
                    </div>
                </div>
            </util:wholePermission>
        </div>
    </div>

    <%@ include file="common/footer.jsp" %>
    <script src="${webRoot}/assets/js/echarts/echarts.min.js"></script>

    <%--用户模板--%>
    <script type="text/html" id="userListTemplate">
        <div style="width: 24.7%; min-width:250px; float: left; height: 120px; background: #60d295; border: 1px solid #57c78b; text-align: center; color: #FFFFFF;">
            <div style="width: 100%; float: left; margin-top: 25px; line-height: normal;">
                <a style="font-size: 35px; text-decoration: none; color: #FFFFFF;"
                   href="${webRoot}/user/1/index">{{=user1}}
                </a>
            </div>
            <div style="width: 100%; float: left; line-height: normal;">自有粉丝</div>
        </div>

        <div style="width: 24.7%; min-width:250px; min-width:250px; float: left; height: 120px; background: #60d295; border: 1px solid #57c78b; text-align: center; color: #FFFFFF;">
            <div style="width: 100%; float: left; margin-top: 25px; line-height: normal;">
                <a style="font-size: 35px; text-decoration: none; color: #FFFFFF;"
                   href="${webRoot}/user/2/index">{{=user2}}
                </a>
            </div>
            <div style="width: 100%; float: left; line-height: normal;">裂变粉丝</div>
        </div>

        <div style="width: 24.7%; min-width:250px; float: left; margin-right:1.2%; height: 120px; background: #60d295; border: 1px solid #57c78b; text-align: center; color: #FFFFFF;">
            <div style="width: 100%; float: left; margin-top: 25px; line-height: normal;">
                <a style="font-size: 35px; text-decoration: none; color: #FFFFFF;"
                   href="${webRoot}/user/4/index">{{=user4}}
                </a>
            </div>
            <div style="width: 100%; float: left; line-height: normal;">平台用户</div>
        </div>

        <div style="width: 24.7%; min-width:250px; float: left; height: 120px; background: #7cbae5; border: 1px solid #6eb0dd; text-align: center; color: #FFFFFF;">
            <div style="width: 100%; float: left; margin-top: 25px; line-height: normal;">
                <a style="font-size: 35px; text-decoration: none; color: #FFFFFF;"
                   href="#">{{=user7}}
                </a>
            </div>
            <div style="width: 100%; float: left; line-height: normal;">总数量</div>
        </div>
    </script>

    <%--汇总模版--%>
    <script type="text/html" id="topStatisticsTemplate">
        <table class="am-table am-table-bordered am-table-centered">
            <thead>
            <tr>
                <th style="font-weight: bold;">总收益</th>
                <th style="font-weight: normal;">总自有收益</th>
                <th style="font-weight: normal;">总二级收益</th>
                <th style="font-weight: bold;">昨日总收益</th>
                <!--<th style="font-weight: normal;">昨日排行</th>-->
                <!--<th style="font-weight: normal;">今日排行</th>-->
                <th style="font-weight: bold; color:#FF0000;">今日总收益</th>
                <%--<th style="font-weight: normal;">意向代言人</th>--%>
                <th style="font-weight: normal;">商家数量</th>
                <th style="font-weight: normal;">二级人数</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td style="font-weight: bold; font-size: 0.8em;">
                    <span>{{=data1}}</span>
                </td>
                <td style=" font-size: 0.8em;">
                    <span>{{=data2}}</span>
                </td>
                <td style=" font-size: 0.8em;">
                    <span>{{=data3}}</span>
                </td>
                <td style="font-weight: bold; font-size: 0.8em;">
                    <span>{{=data4}}</span>
                </td>
                <%--<td style=" font-size: 0.8em;">
                    <span>{{=data8}}</span>
                </td>--%> <%--<td style=" font-size: 0.8em;">
                    <span>{{=data9}}</span>
                </td>--%>
                <td style="font-weight: bold;color:#FF0000; font-size: 0.8em;">
                    <span>{{=data5}}</span>
                </td>
                <%--<td style=" font-size: 0.8em;">
                    <span>{{=data10}}</span>
                </td>--%>
                <td style=" font-size: 0.8em;">
                    <span>{{=data6}}</span>
                </td>
                <td style=" font-size: 0.8em;">
                    <span>{{=data7}}</span>
                </td>
            </tr>
            </tbody>
        </table>
    </script>

    <script type="text/html" id="yesterdayProfitRankTemplate">
        <tr>
            <td>{{=mobile}}</td>
            <td>{{=amount}}</td>
            <td>第{{=pm}}名</td>
        </tr>
    </script>
    <script type="text/javascript">
        $(function () {
            <util:logicPermissionTag name="index:data:1 or index:data:2">
            topStatistics();
            </util:logicPermissionTag>
            <util:wholePermission name="index:data:3">
            accumulateStatisticsGroupByHour();
            </util:wholePermission>
            <util:logicPermissionTag name="index:data:4-1 or index:data:4-2">
            historyStatisticsGroupByHourOrDate();
            </util:logicPermissionTag>
            <util:wholePermission name="index:data:5">
            yesterdayProfitRank();
            </util:wholePermission>
        });

        // 汇总数据和粉丝数据
        function topStatistics() {
            ajaxRequest({url: '${webRoot}/chartData/topStatistics'}, function (data) {
                <util:wholePermission name="index:data:1">
                var userListTemplate = AMUI.template('userListTemplate');
                $('#userList').html(userListTemplate(data.data));
                </util:wholePermission>

                <util:wholePermission name="index:data:2">
                var topStatisticsTemplate = AMUI.template('topStatisticsTemplate');
                $('#topStatistics').html(topStatisticsTemplate(data.data));
                </util:wholePermission>

            }, true);
        }

        //今日实时累计收益数据
        function accumulateStatisticsGroupByHour() {
            var accumulateStatisticsGroupByHour = echarts.init(document.getElementById('accumulateStatisticsGroupByHour'));
            accumulateStatisticsGroupByHour.showLoading();
            ajaxRequest({
                url: '${webRoot}/chartData/accumulateStatisticsGroupByHour',
                data: {
                    beginDay: 0,
                    endDay: 0
                }
            }, function (data) {
                var options = {
                    title: {},
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            var res = params[0].name + '时的收益：' + params[0].value + '元<br/>';
                            return res;
                        }
                    },
                    //直角坐标系内绘制图网格
                    grid: {
                        top: '12%',
                        left: '1%',
                        right: '10%',
                        containLabel: true,
                        borderColor: '#CCC'
                    },
                    xAxis: [],
                    yAxis: [],
                    series: []
                };
                options = $.extend(options, data.data);
                accumulateStatisticsGroupByHour.setOption(options);
                accumulateStatisticsGroupByHour.hideLoading();
            }, true);
        }

        //历史数据汇总
        function historyStatisticsGroupByHourOrDateChangeType(type) {
            if (type == 1) { //天
                $('#historyStatisticsGroupByHourOrDateSelect option[value=0]').attr('disabled', 'disabled');
                $('#historyStatisticsGroupByHourOrDateSelect option[value=1]').attr('disabled', 'disabled');
            } else {
                $('#historyStatisticsGroupByHourOrDateSelect option[value=0]').removeAttr('disabled');
                $('#historyStatisticsGroupByHourOrDateSelect option[value=1]').removeAttr('disabled');
            }
            //historyStatisticsGroupByHourOrDate();
        }
        function historyStatisticsGroupByHourOrDate() {
            var type = $('input[name=historyStatisticsGroupByHourOrDateType]:checked').val();

            var dayOption = $('#historyStatisticsGroupByHourOrDateSelect option:selected');
            var historyStatisticsGroupByHourOrDateChart =
                echarts.init(document.getElementById('historyStatisticsGroupByHourOrDate'));
            historyStatisticsGroupByHourOrDateChart.showLoading();
            ajaxRequest({
                url: '${webRoot}/chartData/historyStatisticsGroupByHourOrDate',
                data: {
                    type: type,
                    beginDay: dayOption.val(),
                    endDay: dayOption.data('end-day')
                }
            }, function (data) {
                var options = {
                    title: {},
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            var res = params[0].name + '时的收益：' + params[0].value + '元<br/>';
                            return res;
                        }
                    },
                    //直角坐标系内绘制图网格
                    grid: {
                        top: '12%',
                        left: '1%',
                        right: '10%',
                        containLabel: true,
                        borderColor: '#CCC'
                    },
                    xAxis: [],
                    yAxis: [],
                    series: []
                };
                options = $.extend(options, data.data);
                historyStatisticsGroupByHourOrDateChart.setOption(options);
                historyStatisticsGroupByHourOrDateChart.hideLoading();
            }, true);
        }


        //昨日排名
        function yesterdayProfitRank() {
            ajaxRequest({url: '${webRoot}/chartData/yesterdayProfitRank/10'}, function (data) {
                var yesterdayProfitRankBody = $('#yesterdayProfitRank').empty();
                var yesterdayProfitRankTemplate = AMUI.template('yesterdayProfitRankTemplate');
                $.each(data.data, function (index, value) {
                    var html = yesterdayProfitRankTemplate(value);
                    yesterdayProfitRankBody.append(html);
                });
            }, true);
        }
    </script>

</body>
</html>
